/*
 * scumix.swat.spark.ColorPicker
 * 颜色选择器
 *
 * author: scumyang
 * create: 2009-09-14
 * update: 2009-09-15
 *         2010-01-23: 	+backgroundColor 属性与 ff RGB() 的兼容.
 *						+弹出位置自适应 * notes : 需导入 scumix.swat.swat3.js
 */

/*
用法:
	

1.声明变量:
var t = null;

2.初始化:
$.pageReady(function()
{
	t = new scumix.swat.spark.ColorPicker();
});

3.显示:
show( 目标对象, 当前颜色 )
如: <input type="text" id="edColor" onmousedown="CP.show(this,'#ae0000')"/>
s
*/

scumix.swat.spark.ColorPicker = $.newClass();
scumix.swat.spark.ColorPicker.prototype =
{
	constructor: function()
	{
		this.id = $.makeGlobalId( 'SxColorPicker' );
		this.ElName = this.id;
		this.color = '';
		this.closeAfterPicked = true;
		
		this.isVisible = false;

		this.EFrame = null;

		this.onPick = null;

		this.initView();
	},

	// init view
	initView: function()
	{
		var colorNum = new Array( 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0 );

		// main bkg container
		this.EFrame = $.createElement({type:'div', id:this.ElName, css:'zIndex:100', attr:{className:'SxColorPicker',exDragable:1}});

		// title-bar
		var o =	$.createElement({type:'div', id:this.ElName+'_Title', css:'', attr:{className:'SxColorPicker_Title',exPass:1}});
			var o1 = $.createElement({type:'div', id:this.ElName+'_TitleText', css:'', attr:{className:'SxColorPicker_Title_Text',innerText:"选择颜色",exPass:1}});
			o.appendChild( o1 );

			o1 = document.createElement('DIV');
			o1.className = 'SxSpark_SysBtn_Close';
			o1.title = '关闭';
			o1.onclick = this.hide.bind(this);
			o1.onmouseover = function(){this.className = 'SxSpark_SysBtn_Close_h'}
			o1.onmouseout = function(){this.className = 'SxSpark_SysBtn_Close'}
		o.appendChild( o1 );
			o1 = document.createElement('DIV');
			o1.className = 'SxSpark_SysBtn_Info';
			o1.title = '关于';
			o1.onclick = this.DoAbout;
			o1.onmouseover = function(){this.className = 'SxSpark_SysBtn_Info_h'}
			o1.onmouseout = function(){this.className = 'SxSpark_SysBtn_Info'}
		o.appendChild( o1 );
		this.EFrame.appendChild( o );

		// sample area
		o =	$.createElement({type:'div', id:this.ElName+'_SampleArea', css:'', attr:{className:'SxColorPicker_SampleArea',exPass:1}});
			// current color sample
			o1 = $.createElement({type:'div', id:this.ElName+'_Sample', css:'background:#333333', attr:{className:'SxColorPicker_Sample',title:'当前颜色',exPass:1}});
			o1.exJSObject = this;
			o1.onmouseover = this.DoOverColor;
			o1.onmousedown = this.DoPickColor;
		o.appendChild( o1 );
		this.EQSample = o1;
			// mouse-over color sample
			o1 = $.createElement({type:'div', id:this.ElName+'_Hot', css:'', attr:{className:'SxColorPicker_Hot',title:'新颜色',exPass:1}});
		o.appendChild( o1 );
		this.EQHot = o1;
			// mouse-over color value
			o1 = $.createElement({type:'div', id:this.ElName+'_HotValue', css:'', attr:{className:'SxColorPicker_HotValue',exPass:1}});
			o.appendChild( o1 );
		this.EQHotValue = o1;
		this.EFrame.appendChild( o );

		// main content
		var oContentTable = $.createElement( {type:'table', id:this.ElName+'_Content', css:'', attr:{className:'SxColorPicker_Content',exPass:1}});
		var oContentTR = document.createElement( 'tr' );
		var oContentTD = document.createElement( 'td' );
		var oContentTB = document.createElement( 'tbody' );
		oContentTR.appendChild( oContentTD );
		oContentTB.appendChild( oContentTR );
		oContentTable.appendChild( oContentTB );

		// chaining JS object
		oContentTable.exJSObject = this;

		// color-cell area
		var oCell = $.createElement( {type:'table', id:this.ElName+'_ColorCell', css:'', attr:{className:'SxColorPicker_ColorCell',cellPadding:0,cellSpacing:0,exPass:1}});
		var oCellTB = document.createElement( 'tbody' );
		for( var i=0; i<16; i++ )
		{
			var tr = document.createElement( 'tr' );
			for( j=0; j<30; j++ )
			{
				var n1 = j % 5;
				var n2 = Math.floor(j / 5) * 3;
				var n3 = n2 + 3;
				tr.appendChild( this._genColorCellTD(
									(colorNum[n3] * n1 + colorNum[n2] * (5 - n1)),
									(colorNum[n3 + 1] * n1 + colorNum[n2 + 1] * (5 - n1)),
									(colorNum[n3 + 2] * n1 + colorNum[n2 + 2] * (5 - n1)),
									i ));
			}
			oCellTB.appendChild( tr );
		}
		oCell.appendChild( oCellTB );
		oContentTD.appendChild( oCell );

		// grayscale-cell area
		oContentTD = document.createElement( 'td' );
		oContentTR.appendChild( oContentTD );

		oCell = $.createElement( {type:'table', id:this.ElName+'_GrayCell', css:'', attr:{className:'SxColorPicker_GrayCell',cellPadding:0,cellSpacing:0,exPass:1}});
		oCellTB = document.createElement( 'tbody' );
		for( var i=255; i>=0; i-=8 )
		{
			if( i == 7 ) i = 0;
			var tr = document.createElement( 'tr' );
			var C = $.toHex(i) + $.toHex(i) + $.toHex(i);
			var td = document.createElement( 'td' );
			td.title = i;
			td.style.background = '#' + C;
			td.onmousedown = this.DoPickColor;
			td.onmouseover = this.DoOverColor;
			tr.appendChild( td );
			oCellTB.appendChild( tr );
		}
		oCell.appendChild( oCellTB );
		oContentTD.appendChild( oCell );

		// add to main container
		this.EFrame.appendChild( oContentTable );

		// add to DOM
		document.body.appendChild( this.EFrame );
		$(document).addEvent( 'click', this.DoClickOut.bind(this));
	},

	// internal-call
	// generate a coloe-cell(TD)
	_genColorCellTD: function( r, g, b, n )
	{
		r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
		g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
		b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;
		C = $.toHex(r) + $.toHex(g) + $.toHex(b);
		C = C.toUpperCase();
		var O = document.createElement( 'td' );
		O.title = '#' + C;
		O.style.background = '#' + C;
		O.onmousedown = this.DoPickColor;
		O.onmouseover = this.DoOverColor;
		return O;
	},

	// hide me
	hide: function()
	{
		$(this.ElName).hide();
		this.isVisible = false;
	},

	// show me
	// E: target element
	// curColor: E's current color
	show: function( E, curColor )
	{
		var orgPos = $(E).absPos();
		$(this.EQSample).css( 'backgroundColor', curColor || this.color );
		$(this.EQHot).css( 'backgroundColor', curColor || this.color );
		
		var ny = orgPos.top + $E(E).offsetHeight + 1;
		$(this.ElName).moveTo( orgPos.left, ny ).show();
		
		if( ny + this.EFrame.offsetHeight > document.body.clientHeight ) ny = orgPos.top - this.EFrame.offsetHeight - 1;
		$(this.ElName).moveTo( orgPos.left, ny );
		
		//$(this.ElName).moveTo( orgPos.left, orgPos.top + $E(E).offsetHeight + 1 ).show();
		this.EBind = $E(E);
		this.isVisible = true;
	},

	// get target element( when me shown )
	getTarget: function()
	{
		return this.EBind;
	},

	// do about info
	DoAbout: function( evt )
	{
		alert( "组件：颜色选择器 (scumix.swat.spark.ColorPicker)\t\n版本：3.0.0.1\n更新：2009-09-16\n\n\n反馈：scumyang@163.com\n本组件基于 SCUMiX SwatWeb" );
	},

	// do while mouse over a color cell.
	DoOverColor: function( evt )
	{
		var jso = this.exJSObject || this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.exJSObject;
		if( !jso ) return false;
		var C = jso._ToHexColor( this.style.background );
		$(jso.EQHot).css( 'backgroundColor', C );
		$(jso.EQHotValue).setText( C );
	},

	// do when pick-up a color, and update target element's value.
	DoPickColor: function( evt )
	{
		var jso = this.exJSObject || this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.exJSObject;

		// 更新目标元素
		if( !jso || !jso.EBind ) return;
		var C = jso._ToHexColor( this.style.backgroundColor );
		jso.EBind.value = C;
		jso.color = C;

		// hide me
		if( jso.closeAfterPicked ) jso.hide();

		// callback
		if( jso.onPick ) jso.onPick( jso );
	},

	DoClickOut: function( E )
	{
		if( !this.isVisible ) return;
		var e = $.getTarget(E);
		if( !$(this.EFrame).ptIn( E ) && $.getTarget(E) != this.EBind ) this.hide();
	},
	
	_ToHexColor: function( A )
	{
		A = A.toUpperCase();
		
		if( A.indexOf( "RGB" ) != -1 )
		{
			A = A.replace( "RGB(", "" );
			A = A.replace( ")", "" );
			A = A.split( "," );
			var r = parseInt( A[0] ), g = parseInt( A[1] ), b = parseInt( A[2] );
			r = r.toString( 16 );
			if( r.length == 1 ) r = '0' + r;
			g = g.toString( 16 );
			if( g.length == 1 ) g = '0' + g;
			b = b.toString( 16 );
			if( b.length == 1 ) b = '0' + b;
			return( '#' + r + g + b ).toUpperCase();
		}
		else
		{
			return A;
		}
	}
}